import React from "react";
import { Collapse } from "antd";
import { PenChildProps } from "@/types";
import { AnimationMain } from "@/components/Configuration/PenProps/components/AnimationMain.tsx";
import { PenToolTip } from "@/components/Configuration/PenProps/components/PenToolTip.tsx";
import { AnimationLine } from "@/components/Configuration/PenProps/components/AnimationLine.tsx";
import { AnimationVideo } from "@/components/Configuration/PenProps/components/AnimationVideo.tsx";
import { AnimationIframe } from "@/components/Configuration/PenProps/components/AnimationIframe.tsx";
export function PenAnimation(props: PenChildProps) {
  const panelStyle: React.CSSProperties = {
    borderRadius: 0,
  };
  return (
    <>
      {props.penOptions.type == undefined && (
        <Collapse
          style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
          items={[
            {
              key: "animation",
              label: "动画",
              children: <AnimationMain {...props} />,
              style: panelStyle,
            },
          ]}
          defaultActiveKey={["animation"]}
        />
      )}
      {props.penOptions.type == 1 && (
        <Collapse
          style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
          items={[
            {
              key: "animation",
              label: "动画",
              children: <AnimationLine {...props} />,
              style: panelStyle,
            },
          ]}
          defaultActiveKey={["animation"]}
        />
      )}
      {props.penOptions.name == "video" && (
        <Collapse
          style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
          items={[
            {
              key: "animation",
              label: "视频",
              children: <AnimationVideo {...props} />,
              style: panelStyle,
            },
          ]}
          defaultActiveKey={["animation"]}
        />
      )}
      {props.penOptions.name == "iframe" && (
        <Collapse
          style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
          items={[
            {
              key: "animation",
              label: "网页",
              children: <AnimationIframe {...props} />,
              style: panelStyle,
            },
          ]}
          defaultActiveKey={["animation"]}
        />
      )}
      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        items={[
          {
            key: "tooltip",
            label: "鼠标提示",
            children: <PenToolTip {...props} />,
            style: panelStyle,
          },
        ]}
        defaultActiveKey={["tooltip"]}
      />
    </>
  );
}
